<template>
	<div v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<el-table ref="multipleTable" :data="faceData" :header-cell-style="header_cell_style" max-height="360" @selection-change="handleSelectionChange">
			<el-table-column type="selection">
			</el-table-column>
			<el-table-column prop="id" label="ID" width="150">
			</el-table-column>
			<el-table-column prop="room_address" label="地址">
			</el-table-column>
			<el-table-column prop="is_transmit" label="is_transmit(人口)" sortable>
				<template #default="scope">
					<span :class="scope.row.is_transmit == '1' ? 'green' : 'red' ">{{scope.row.is_transmit == "1" ? "人口已传输" : "人口未传输" }}</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import API from '@/api/index.js'
	import mixin from '@/mixin.js';

	export default {
		mixins: [mixin],
		data() {
			return {
				loading: false,
				address_id: '',
				faceData: [],
				allFace: [], // 选中的房间
				typeName: this.typeFace
			}
		},
		props: ['typeFace'],
		watch: {
			typeFace(val) {
				this.typeName = val;
			}
		},
		mounted() {
			this.getRooms();
		},
		methods: {
			getRooms() {
				let self = this;
				self.loading = true;
				self.address_id = localStorage.getItem('address_id');
				API.addressMultiFaces(self.address_id).then(res => {
					let data = res.data.data;
					self.loading = false;
					self.faceData = data;
				}).catch(err => {
					self.loading = false;
					self.$message.error(err.response.data.message)
				})
			},
			
			handleSelectionChange(val) {
				let self = this;
				self.allFace = [];
				val.map(item => {
					self.allFace.push(item.id);
				});
				self.$emit('getChildFace', {
					allFace: self.allFace
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.green {
		color: green;
	}
	.red {
		color: red;
	}
</style>
